<template>
  <div id="product-list-one">
	<h2>Product List One</h2>
	<ul>
		<li v-for="product in saleProducts">
			<span class="name">{{product.name}}</span>
			<span class="price">${{product.price}}</span>
		</li>
	</ul>
	 <button @click="reducePrice(0)">商品降价</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
export default {
/*
	props:["products"],//接收父组件传过来的值
  data () {
    return {
     
    }
  }
  */
  computed:{
	products(){
		return this.$store.state.products;
	},
	/*
	saleProducts(){
		//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
		
		var saleProducts = this.$store.state.products.map(product=>{
				return{
					name:"**" + product.name + "**",
					price:product.price/2
				};
			});
			return saleProducts
			
		
		return this.$store.getters.saleProducts;			
	},*/
	//mapGetters 辅助函数
	...mapGetters([
		"saleProducts"
	])
	
  },
  methods:{
  ...mapActions([
	"reducePrice"
  ])
  
  /*
	reducePrice:function(amount){
		//forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
		//this.$store.state.products.forEach(product => {
		//	product.price -= 1;
		//})
		//this.$store.commit('reducePrice');//走mutations方法
		this.$store.dispatch("reducePrice",amount);
		
	}*/
  }
  
  
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}

</style>
